// 使用 React.createClass 创建一个组件
var DemoComponent = React.createClass({
    // 使用 getInitialState 的返回值作为数据的默认值
    getInitialState: function () {
        return {data: [],tk:this.getUrl(window.location.href).tk,host:"http://app.uyu.com:3001/upload"};
    },

    // 使用 componentDidMount 在组件初始化后执行一些操作
    componentDidMount: function () {
        // 拉取远程数据
        // 开启假数据服务器：
        // cd fake-server && npm install && node applist.js
        this.fetchData();
    },

    // 使用自定义的 fetchData 方法从远程服务器获取数据
    fetchData: function () {
        var self = this;
        // 发起 ajax 获取到数据后调用 setState 方法更新组件的数据
        var result = fetch(self.state.host+'/version/getApplications?tk='+self.state.tk);
        result.then(function (response) {
            return response.json();
        }).then(function (json) {
            self.setState({data: json.data});
        }).catch(function (ex) {
            console.log('failed', ex)
        });
    },
    onUpData: function (package_name) {
        window.open("./channellist.html?tk="+this.state.tk+"&package_name="+ package_name,"_self");
    },
    getUrl: function (url) {
        var reg = /([^&?=#]+)=([^&?=#]+)/g;
        var ary = {};
        url.replace(reg, function () {
            ary[arguments[1]] = arguments[2];
        });
        return ary;
    },
    onRemove: function (generate) {
        var self = this;
        var id = generate.package_name;

        // 发起 ajax 获取到数据后调用 setState 方法更新组件的数据
        var url = self.state.host+'/version/deleteApplication?package_name=' + id + '&tk='+self.state.tk;
        fetch(url).then(function (response) {
            return response.json();
        }).then(function (json) {
            if (json.code == 0) {
                self.state.data = self.state.data.filter(function (row, index) {
                    if (row.package_name != id) {
                        return row;
                    }
                });
                self.setState({data: self.state.data});
            }

        }).catch(function (ex) {
            console.error(ex)
        });
    },
    onSubmit:function(){
        var self=this;
        var url = self.state.host+'/version/createApplication?tk='+self.state.tk;
        var refs = this.refs;
        var input = React.findDOMNode(refs.app_apk);
        var data = new FormData();

        data.append('apk', input.files[0]);
        fetch(url,{
            method: "POST",
            body:data
        }).then(function (response) {
            return response.json();
        }).then(function (json) {
            if (json.code == 0) {
                var appDatas = self.state.data;
                appDatas.splice(0,0,json.data);
                self.setState({data: self.state.data});
            }else{
                alert(json.message);
            }
        });
        React.findDOMNode(refs.app_apk).value='';
    },

    // 使用 render 方法自动渲染 DOM
    render: function () {
        var self = this;
        var appGenerate = this.state ? this.state.data.map(function (generate) {
            return (
                <li className="generate-item" key={generate.id}>
                    <span className="generate-date generate-dateWidth">{generate.app_name}</span>

                    <span className="generate-date generate-dateWidth2">{generate.package_name}</span>

                    <span className="generate-date generate-dateWidth1">{generate.created_at}</span>

                    <span className="generate-date generate-dateWidth1">{generate.updated_at}</span>
                    <a className="generate-dataPadd" href="#" onClick={self.onRemove.bind(null, generate)}>删除</a>
                    <a className="generate-dataPadd" href="#" onClick={self.onUpData.bind(null, generate.package_name)}>更新</a>
                </li>
            )
        }.bind(this)) : '';// 注意这里 bind(this) 修正了上下文

        return (
            <div className="component-container">
                <div className="hello-movies">
                    <p2 className="component-title">应用列表</p2>

                    <form method="post" encType="multipart/form-data">
                        <input type="file" ref="app_apk" name="apk"/>

                        <input className="component-submit" onClick={this.onSubmit.bind(null)} type="button"
                               value="提交"/>
                    </form>
                </div>
                <ul className="generate-ul">
                    <li className="generate-item">
                        <span className="generate-date generate-dateWidth">name</span>

                        <span className="generate-date generate-dateWidth2">应用程序包名</span>

                        <span className="generate-date generate-dateWidth1">创建时间</span>

                        <span className="generate-date generate-dateWidth1">更新时间</span>
                        <span className="generate-dataPadd">删除</span>
                        <span className="generate-dataPadd">应用更新</span>
                    </li>
                    {appGenerate}
                </ul>
            </div>
        )
    }
});

// 将组件插入到网页中指定的位置
React.render(<DemoComponent />, document.getElementById('demo'));
